<template>
  <div class="chart-container">
    <h2 class="chart-title">近期天气</h2>
    <div class="forecast-container">
      <div class="forecast-grid" v-if="forecast.length > 0">
        <div class="forecast-item">
          <div class="date">今天</div>
          <div class="sub-date">{{ forecast[0].date.slice(5) }}</div>
          <div class="weather">{{ forecast[0].dayweather }}</div>
          <div class="wind">风力 {{ forecast[0].daypower }}级</div>
        </div>
        <div class="forecast-item">
          <div class="date">明天</div>
          <div class="sub-date">{{ forecast[1].date.slice(5) }}</div>
          <div class="weather">{{ forecast[1].dayweather }}</div>
          <div class="wind">风力 {{ forecast[1].daypower }}级</div>
        </div>
        <div class="forecast-item">
          <div class="date">
            周{{
              ["日", "一", "二", "三", "四", "五", "六", "日"][forecast[2].week]
            }}
          </div>
          <div class="sub-date">{{ forecast[2].date.slice(5) }}</div>
          <div class="weather">{{ forecast[2].dayweather }}</div>
          <div class="wind">风力 {{ forecast[2].daypower }}级</div>
        </div>
        <div class="forecast-item">
          <div class="date">
            周{{
              ["日", "一", "二", "三", "四", "五", "六", "日"][forecast[3].week]
            }}
          </div>
          <div class="sub-date">{{ forecast[3].date.slice(5) }}</div>
          <div class="weather">{{ forecast[3].dayweather }}</div>
          <div class="wind">风力 {{ forecast[3].daypower }}级</div>
        </div>
      </div>
      <div class="temperature-chart">
        <v-chart :option="option"></v-chart>
        <!-- 图表将在这里渲染 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { getWeatherForecast } from "../api/index.js";
import { useAdcode } from "@/stores/localcity.js";
import { storeToRefs } from "pinia";
const store = useAdcode(); // 假设这是你的adcode
const { adcode } = storeToRefs(store);

const forecast = ref([]); // 存储天气数据
const option = ref({}); // 图表配置
const renderChart = (data, data1) => {
  option.value = {
    xAxis: {
      show: false, // 隐藏x轴
      type: "category", // 类型为类目轴
      boundaryGap: false,
    },
    yAxis: {
      show: false, // 隐藏y轴
      type: "value", // 类型为数值轴
    },
    series: [
      {
        name: "白天温度", // 系列名称
        type: "line", // 折线图
        smooth: true, // 平滑曲线
        data: data, // 数据
        itemStyle: {
          color: "rgb(84,112,198)", // 设置折线颜色
          borderWidth: 2, // 设置折线边框宽度
        },
        label: {
          show: true, // 显示标签
          position: "top", // 标签位置
          color: "white", // 标签颜色
          fontSize: 12, // 字体大小
          formatter: "白{c}°C", // 显示内容
        },
      },
      {
        name: "夜间温度", // 系列名称
        type: "line", // 折线图
        smooth: true, // 平滑曲线
        data: data1, // 数据
        itemStyle: {
          color: "rgb(145, 204, 117)",

          borderWidth: 2, // 设置折线边框宽度
        },
        label: {
          show: true,
          position: "bottom",
          color: "white",
          fontSize: 12,
          formatter: "晚{c}°C",
        },
      },
    ],
  };
};
const dayTemperature = ref([]);
const nightTemperature = ref([]);
// 3. 获取天气预报数据并处理
const getForecastData = async () => {
  try {
    const res = await getWeatherForecast(adcode.value);
    forecast.value = res.forecasts[0].casts;
    
    // 处理温度数据
    forecast.value.forEach((item) => {
      dayTemperature.value.push(item.daytemp);
      nightTemperature.value.push(item.nighttemp);
    });
    
    // 渲染图表
    renderChart(dayTemperature.value, nightTemperature.value);
  } catch (error) {
    console.error("获取天气预报数据失败:", error);
  }
};

// 4. 监听adcode变化并获取数据
watch(adcode, () => {
  getForecastData();
});

</script>

<style lang="scss" scoped>
.chart-container {
  padding: 20px;
  color: white;

  .chart-title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .forecast-container {
    background-color: rgba(0, 78, 102, 0.9);
    border-radius: 8px;
    padding: 20px;

    .forecast-grid {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;

      .forecast-item {
        flex: 1;
        text-align: center;

        .date {
          font-size: 16px;
          margin-bottom: 8px;
        }

        .sub-date {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 16px;
        }

        .weather {
          font-size: 16px;
          margin-bottom: 8px;
        }

        .wind {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    .temperature-chart {
      height: 200px;
      width: 100%;
      // 为温度曲线图预留空间
    }
  }
}
</style>
// 添加以下代码以解决当前问题：

// 1. 定义响应式数据
const forecast = ref([]);
const option = ref({});
const dayTemperature = ref([]);
const nightTemperature = ref([]);

// 2. 定义渲染图表的函数
const renderChart = (data, data1) => {
  option.value = {
    xAxis: {
      show: false,
      type: "category",
      boundaryGap: false,
    },
    yAxis: {
      show: false,
      type: "value",
    },
    series: [
      {
        name: "白天温度",
        type: "line",
        smooth: true,
        data: data,
        itemStyle: {
          color: "rgb(84,112,198)",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "top",
          color: "white",
          fontSize: 12,
          formatter: "白{c}°C",
        },
      },
      {
        name: "夜间温度",
        type: "line",
        smooth: true,
        data: data1,
        itemStyle: {
          color: "rgb(145, 204, 117)",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: 'bottom',
          color: 'white',
          fontSize: 12,
          formatter: '晚{c}°C'
        }
      },
    ],
  };
};

// 3. 获取天气预报数据并处理
const getForecastData = async () => {
  try {
    const res = await getWeatherForecast(adcode.value);
    forecast.value = res.forecasts;
    
    // 处理温度数据
    forecast.value.forEach((item) => {
      dayTemperature.value.push(item.daytemp);
      nightTemperature.value.push(item.nighttemp);
    });
    
    // 渲染图表
    renderChart(dayTemperature.value, nightTemperature.value);
  } catch (error) {
    console.error("获取天气预报数据失败:", error);
  }
};

// 4. 监听adcode变化并获取数据
watch(adcode, () => {
  getForecastData();
});

// 5. 组件挂载时获取初始数据
onMounted(() => {
  getForecastData();
});
